<template>
  <el-drawer
    :title="form.id ? '修改产品' : '新增产品'"
    :visible.sync="$props.drawer"
    :before-close="handleClose"
    size="40%"
  >
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="申请人" prop="applicant" :rules="{ required: true, message: '申请人不能为空'}">
        <div style="width: 40%;">
          <el-input v-model="form.applicant" placeholder="请输入申请人" clearable size="small" />
        </div>
      </el-form-item>
      <el-form-item label="申请人电话" prop="applicantTel" :rules="{ required: true, message: '申请人电话不能为空'}">
        <div style="width: 40%;">
          <el-input v-model="form.applicantTel" placeholder="请输入申请人电话" clearable size="small" />
        </div>
      </el-form-item>
      <el-form-item label="申请金额" prop="amount" :rules="{ required: true, message: '申请金额不能为空'}">
        <div style="width: 40%;">
          <el-input v-model="form.amount" placeholder="请输入申请金额" clearable size="small" />
        </div>
      </el-form-item>

      <el-form-item label="期数" prop="periods" :rules="{ required: true, message: '期数不能为空'}">
        <div style="width: 40%;">
          <el-input v-model="form.periods" placeholder="请输入期数" clearable size="small" />
        </div>
      </el-form-item>
      <el-form-item label="车牌号" prop="carNumber" :rules="{ required: true, message: '车牌号不能为空'}">
        <div style="width: 40%;">
          <el-input v-model="form.carNumber" placeholder="请输入车牌号" clearable size="small" />
        </div>
      </el-form-item>
      <el-form-item label="车架号" prop="vin" :rules="{ required: true, message: '车架号不能为空'}">
        <div style="width: 40%;">
          <el-input v-model="form.vin" placeholder="请输入车架号" clearable size="small" />
        </div>
      </el-form-item>
      <el-form-item label="上牌时间" prop="registrationTime" :rules="{ required: true, message: '上牌时间不能为空'}">
        <div style="width: 40%;">
          <el-date-picker
            v-model="form.registrationTime"
            type="datetime"
            clearable
            size="small"
            placeholder="选择日期时间"
          />
          <!-- <el-input v-model="form.registrationTime" placeholder="请输入产品名称" clearable size="small" /> -->
        </div>
      </el-form-item>
      <el-form-item label="里程数" prop="mileage" :rules="{ required: true, message: '里程数不能为空'}">
        <div style="width: 40%;">
          <el-input v-model="form.mileage" placeholder="请输入里程数" clearable size="small" />
        </div>
      </el-form-item>

      <el-form-item label="能源类型" prop="type" :rules="{ required: true, message: '能源类型不能为空'}">
        <div style="width: 40%;">
          <el-input v-model="form.type" placeholder="请输入能源类型" clearable size="small" />
        </div>
      </el-form-item>
      <el-form-item label="上牌地区" prop="area" :rules="{ required: true, message: '上牌地区不能为空'}">
        <div style="width: 40%;">
          <el-cascader
            v-model="form.area"
            :options="areaList"
            clearable
          />
        </div>
      </el-form-item>
      <el-form-item label="身份证号" prop="idCard" :rules="{ required: true, message: '身份证号不能为空'}">
        <div style="width: 40%;">
          <el-input v-model="form.idCard" placeholder="身份证号里程数" clearable size="small" />
        </div>
      </el-form-item>

      <el-form-item label="身份证照片" prop="idCardImges" :rules="{ required: true, message: '上传身份证照片'}">
        <ImageUpload v-model="form.idCardImges" :limit="1" />
      </el-form-item>
      <el-form-item label="行驶证照片" prop="drivingImages" :rules="{ required: true, message: '行驶证照片'}">
        <ImageUpload v-model="form.drivingImages" :limit="1" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">{{ form.id ? '立即修改' : '立即创建' }}</el-button>
        <el-button @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<script>
import { area } from '@/utils/area'
// import QuillText from '@/components/QuillText/index'
import request from '@/utils/request'

export default {
  components: {
    // QuillText
  },
  props: {
    drawer: {
      type: Boolean,
      default: false
    },
    defaultValue: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      form: {
        product: '',
        productDetail: {}
      },
      areaList: (() => {
        const list = area.map(item => {
          return {
            value: item.ad_name,
            label: item.ad_name,
            children: item.children.map(item => ({ value: item.name, label: item.name }))
          }
        })
        console.log(list)
        return list
      })()
    }
  },
  watch: {
    defaultValue(val, val2) {
      // const { province, city, productDetail } = val
      // const area = [province, city]
      // productDetail.accessArea = productDetail.accessArea.split('-')
      this.form = {
        ...val

      }
      // console.log(this.form, 'form')
    }
  },
  methods: {
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const { area } = this.form
          const params = this.form
          if (typeof area !== 'string') {
            params.area = area[1]
          }
          this.request(this.form)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    async request(params) {
      try {
        await request({
          url: 'system/apply',
          method: 'put',
          data: params
        })
        this.$message({
          message: params.id ? '修改成功' : '添加成功',
          type: 'success',
          duration: 2000,
          onClose: () => this.$emit('add-success')
        })
      } catch (error) {
        this.$message({
          message: error,
          type: 'warning'
        })
      }
      //
    },
    handleClose() {
      this.$emit('close:drawer', false)
    }
  }
}
</script>

<style scoped>
  .item {
    display: flex;
    justify-content: right;
  }
  .required {
    color: red;
  }
</style>
